<template>
  <n-grid :cols="12">
    <n-grid-item :offset="2" span="8">
      <detail-page-header title="添加检查清单"> </detail-page-header>
      <div class="mt-[16px]">
        <n-card>
          <n-form ref="formRef" :model="checkListForm">
            <n-row :gutter="10">
              <n-col :span="24">
                <n-form-item label="检查清单名称" path="name">
                  <n-input
                    placeholder="请输入检查清单名称"
                    v-model:value="checkListForm.name"
                  />
                </n-form-item>
              </n-col>
              <n-col :span="24">
                <n-form-item label="关联产品" path="productId">
                  <n-select
                    :options="productOpts"
                    value-field="id"
                    label-field="name"
                    placeholder="请选择关联产品"
                    v-model:value="checkListForm.productId"
                    remote
                    clearable
                    filterable
                    @search="handleSearchProduct"
                  />
                </n-form-item>
              </n-col>
              <!-- ITEM -->
              <template
                v-for="(item, $index) in checkListForm.questionList"
                :key="item.id"
              >
                <n-col :span="24">
                  <n-divider />
                </n-col>
                <n-col
                  :span="24"
                  v-if="
                    checkListForm.questionList &&
                    checkListForm.questionList.length > 1
                  "
                >
                  <div class="text-right">
                    <n-button
                      size="small"
                      type="error"
                      secondary
                      @click="handleRemoveQuestion(item)"
                    >
                      <template #icon>
                        <Trash />
                      </template>
                    </n-button>
                  </div>
                </n-col>
                <n-col :span="20">
                  <n-form-item :label="`检查项${$index + 1}`">
                    <n-input
                      placeholder="请输入检查项"
                      v-model:value="item.name"
                    />
                  </n-form-item>
                </n-col>
                <n-col :span="4">
                  <n-form-item :show-lable="false">
                    <n-checkbox
                      v-model:checked="item.showRepair"
                      :checked-value="'1'"
                      :unchecked-value="'0'"
                    >
                      维修是否适用
                    </n-checkbox>
                  </n-form-item>
                </n-col>
                <n-col :span="24">
                  <n-form-item label="详细描述">
                    <n-input
                      v-model:value="item.description"
                      type="textarea"
                      placeholder="请输入详细描述"
                    />
                  </n-form-item>
                </n-col>
                <n-col :span="24">
                  <n-form-item label="关联零部件">
                    <n-select
                      placeholder="请选择关联零部件"
                      v-model:value="item.variantId"
                      :options="variantOpts"
                      value-field="id"
                      label-field="name"
                      remote
                      clearable
                      filterable
                      @search="handleSearchVariants"
                    />
                  </n-form-item>
                </n-col>
                <n-col :span="8">
                  <n-form-item label="回收扣减金额">
                    <n-input-number
                      class="w-full"
                      v-model:value="item.tradeinReducePrice"
                    />
                  </n-form-item>
                </n-col>
                <n-col :span="8">
                  <n-form-item label="维修服务费">
                    <n-input-number
                      class="w-full"
                      v-model:value="item.repairPrice"
                    />
                  </n-form-item>
                </n-col>
                <n-col :span="8">
                  <n-form-item label="维修费用">
                    <n-input-number
                      class="w-full"
                      v-model:value="item.repairPromoPrice"
                    />
                  </n-form-item>
                </n-col>
              </template>
              <n-col :span="24">
                <n-button
                  block
                  tertiary
                  type="primary"
                  @click.stop="handleAddQuestion"
                >
                  <template #icon>
                    <AddCircleOutline />
                  </template>
                  添加检查项
                </n-button>
              </n-col>
              <n-col :span="24">
                <div class="text-right pt-4">
                  <n-button type="primary" @click.stop="handleCreateCheckList">
                    保存
                  </n-button>
                </div>
              </n-col>
            </n-row>
          </n-form>
        </n-card>
      </div>
    </n-grid-item>
  </n-grid>
</template>
<script setup lang="ts">
import { reactive, ref } from "vue";
import { FormInst } from "naive-ui";
import { AddCircleOutline, Trash } from "@vicons/ionicons5";
import { createCheckList } from "@/api/checkList/checkList.api";
import {
  CheckListDto,
  QuestionItem,
} from "@/types/model/checkList/dtos/checkList.dto";
import { useCheckListAction } from "../hooks/useCheckListAction";

const {
  productOpts,
  variantOpts,
  handleSearchProduct,
  handleSearchVariants,
  addQuestionItem,
} = useCheckListAction();

const formRef = ref<FormInst | null>(null);

const checkListForm = reactive<CheckListDto>({
  name: "",
  productId: undefined,
  questionList: [],
});

const handleAddQuestion = () => {
  checkListForm.questionList.push(addQuestionItem());
};

const handleRemoveQuestion = (question: QuestionItem) => {
  if (question.id) {
    checkListForm.questionList = checkListForm.questionList.filter(
      (item: QuestionItem) => item.id !== question.id
    );
  }
};

const handleCreateCheckList = async () => {
  createCheckList(checkListForm).then((res) => {
    console.log(res);
  });
};
</script>
